<template>
  <a-content :filter="false">
    <DetailedLayout>
      <template #aside>
        <DetailedHeader />
      </template>
      <div class="tag-wrap">
        <TabsMenu class="self-align-end" :list="tagMenuList" @change="tagMenu" />
        <div class="self-align-center">
          <a-space :size="8">
            <a-button>开通教师端账号</a-button>
            <a-button type="primary">编辑</a-button>
          </a-space>
        </div>
      </div>
      <div class="content-wrap">
        <DetailedModule v-if="modules === 'detailed'" />
        <DetailedFile v-if="modules === 'file'" />
        <detailedTabFollow v-if="modules === 'follow'" />
      </div>
    </DetailedLayout>
  </a-content>
</template>
<script lang="ts" setup>
  import Drawer from "@/components/drawer/index.vue"
  import TabsMenu from "@/components/tabsMenu/index.vue"
  import DetailedLayout from "../../components/detailedLayout/index.vue"
  import DetailedHeader from "../../components/detailedHeader/index.vue"
  // tab-module
  import DetailedModule from "./content.vue"
  import DetailedFile from "../../components/detailedTabFile/index.vue"
  import detailedTabFollow from "../../components/detailedTabFollow/index.vue"

  const modules = ref<string | undefined>("detailed")

  const tagMenuList = ref([
    { label: "详情", value: 1, key: "detailed", dot: true, number: 5 },
    { label: "文件", value: 2, key: "file", number: 20 },
    { label: "跟进", value: 3, key: "detailed" },
    // { label: "课程成员", value: 4, key: 'follow' },
  ])
  interface tagMenuInterface {
    key?: string
  }
  const tagMenu = (item: tagMenuInterface): void => {
    modules.value = item.key
  }

  const innerLoading = () => {
    return new Promise<void>((resolve) => {
      setTimeout(() => {
        resolve()
      }, 2000)
    })
  }
</script>
<style lang="scss" scoped>
  .tag-wrap {
    display: flex;
    justify-content: space-between;
    margin: 14px 16px 12px;
    border-bottom: 1px solid var(--n-black-border);
    height: 44px;
  }
  .content-wrap {
    flex: 1;
    height: 0;
    padding: 0 16px;
    overflow-y: auto;
    overflow-x: hidden;
  }
</style>
